<template>
  <div>
    <x-header :title="title"></x-header>
    <img class="banner" src="../assets/img/banner_login.jpg" />
    <group label-margin-right="1.5em" label-align="center" gutter="20">
      <x-input title="登录编码" placeholder="请输入登录编码" v-model="orderKey" required>
      </x-input>
    </group>
    <x-button class="button" type="primary" @click.native="checkOrderKey" text="登录" :disabled="isLogin"></x-button>
  </div>
</template>
<script>
import {
  XHeader,
  Group,
  XInput,
  XButton,
  Alert
} from "vux";
export default {
  components: { XHeader, Group, XInput, XButton, Alert },
  data() {
    return {
      title: "艺术类考试报名登录",
      orderKey: "",
    };
  },
  created: function() {
    const vm = this;
    vm.$bridge.registerhandler("jsCloseWebPage", (data, responseCallback) => {
      history.back();
      responseCallback("0");
    });
  },
  computed: {
    isLogin() {
      return !this.orderKey;
    }
  },
  methods: {
    checkOrderKey: function() {
      const vm = this;
      this.$api
        .getPartner(vm.orderKey)
        .then(response => {
          if (!response) {
            vm.$vux.alert.show({
              content: "登录编码错误！"
            });
          } else {
            vm.$store.commit("SET_PARTNER_ID", response.id);
            vm.$router.push("/Apply");
          }
        })
        .catch(err => {
          console.log("出错了" + err);
        });
    }
  }
};
</script>
<style scoped>
.banner {
  width: 100%;
}
.button {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 80%;
}
</style>